import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/travelogues',
    name: 'TravelogueWall',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../components/Travelogue.vue')
  },
  {
    path: '/homepage',
    name: 'HomePage',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../components/HomePage.vue')
  },
  {
    path: '/destinations',
    name: 'DestinationPage',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../components/Destinations.vue')
  },
  {
    path: '/login',
    name: 'LoginPage',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/LoginView.vue')
  },
  {
    path: '/forgetPage',
    name: 'ForgotPasswordPage',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/ForgetPWD.vue')
  },
  {
    path: '/register',
    name: 'RegisterPage',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Register.vue')
  },
  {
    path: '/plan',
    name: 'TravelPlanner',
    component: () => import(/* webpackChunkName: "about" */ '../components/TravelPlanner.vue'),
    children: [
      {
        path: '/travelGuidePage',
        name: 'TravelGuide',
        component: () => import('../components/TravelGuidePage.vue')
      }
    ]

  },
  {
    path: '/postLogue',
    name: 'TravelJournalEditor',
    component: () => import(/* webpackChunkName: "about" */ '../components/TravelBlogEditor.vue')
  }, {
    path: '/personView',
    name: 'personView',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../components/PersonView.vue')
  }, {
    path: '/CityDetail/:regionId',
    name: 'CityDetail',
    props: true ,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../components/CityDetail.vue')
  },
  {
    path: '/spotsIntro',
    name: 'SpotsIntroPage',
    component: () => import('../views/SpotsView.vue')
  },
  {
    path: '/search',
    name: 'SearchPage',
    component: () => import('../views/SearchView.vue')
  },
  {
    path: '/travelBlogPage',
    name: 'TravelBlogPage',
    component: () => import('../views/TravelBlogView.vue')
  },
  {
    path: '/travelGuidePage',
    name: 'TravelGuide',
    component: () => import('../components/TravelGuidePage.vue')
  },
  {
    path: '/mapContainer',
    name: 'MapContainer',
    component: () => import('../components/MapContainer.vue')
  },
  {
    path: '/travelGuideView',
    name: 'TravelGuideView',
    component: () => import('../views/TravelGuideView.vue')
  },
  //   总的攻略页面
  {
    path: '/guideView',
    name: 'GuideView',
    component: () => import('../views/GuidView.vue'),

  },
  //   目的地-主题 下级页面
  {
    path: '/themePage',
    name: 'ThemePage',
    component: () => import('../components/ThemePage.vue')
  },
  

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
